<template>
  <div class="min-h serveProject bg-wt">
    <!-- 引入子组件
    传属性，:
    传方法 @
    -->
    <!-- 搜索组件 -->
    <!-- pagination: 搜索的条件，每页大小，页码 -->
    <!-- handleReset: 重置按钮 handleSearch: 搜索按钮
         handleClear： 清空输入框时触发, 重新查询，查询第一页 
    -->

    <SearchForm :searchData="pagination" @handleReset="handleReset" @handleSearch="handleSearch" @handleClear="handleClear" />
    <!-- 护理项目列表
      data: 表格的数据，查询的结果集  pagination：分页栏的数据  onChange: 分页栏中的每页大小，页码变更时触发
      handleBulid: 新增护理项目 按钮时触发， handleEdit：点击某一行编辑按钮时触发
    -->
    <TableList :data="data" :pagination="pagination" @onChange="onChange" 
    @handleBulid="handleBulid"
    @handleEdit="handleEdit"/>
    <!-- 新增或修改的窗口
    ref: 接收子组件暴露出来给父组件的对象 defineExpose({属性名,方法名})
    visible: 控制窗口是否展示
    data: 表单中的数据
    title: 控制弹窗的标题，确定按钮时 判断是新增还是修改
    handleClose：点击窗口右上角的X时调用
    handleAdd: 点击 确定 按钮时触发， 新增的提交
    handleEdit: 点击 确定 按钮时触发， 修改的提交
    -->
    <DialogForm ref="formRef" :visible="visible" 
    :data="formBaseData" :title="title"
    @handleClose="handleClose" @handleAdd="handleAdd"
    @handleEdit="handleEditForm"
    />
  </div>
</template>

<script setup lang="jsx">
import { onMounted, ref } from 'vue'
import { getProjectDetails, getProjectList,projectAdd,projectUpdate } from '@/api/serve';
import TableList from './components/TableList.vue';
import SearchForm from './components/SearchForm.vue';
import DialogForm from './components/DialogForm.vue';
import { MessagePlugin } from 'tdesign-vue-next';

// ***************** 护理项目列表 ***********
const data = ref([]);
// 加载数据,发请求后台
let search = async ()=>{
  let result = await getProjectList(pagination.value);
  data.value = result.data.records;
  pagination.value.total = result.data.total;
}
onMounted(()=>{
  search();
});
// 分页栏
const pagination = ref({
  page: 1,
  pageSize: 10,
  total: 0
})
// 分页栏数据变更时触发
const onChange = (pageInfo) => {
  pagination.value.pageNum = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  search();
}
//***************************************/


// **************** 搜索表单 **************
// 3个方法
//重置搜索框
const handleReset = () =>{
  pagination.value={
    pageNum: 1,
    pageSize: 10,
    total: 0
  }
  handleSearch();
}

//搜索
const handleSearch = () =>{
  //debugger;
  pagination.value.pageNum = 1;
  search();
}

//清空
const handleClear = (val) =>{
  if(val == 'name'){
    //pagination.value.name='';
    delete pagination.value.name;
  }else{
    delete pagination.value.status;
  }
  handleSearch();
}
//***************************************/

// **************** 新增/修改 **************
let visible = ref(false);// 控制新增/修改窗口是否弹出
// 新增、修改窗口
const handleBulid = () => {
  title.value='新增'
  visible.value=true;// 弹窗
}
// 给弹窝 X 关闭的事件
const handleClose = ()=>{
  visible.value=false; // 关闭窗口
}
// 确定 调用的方法
let handleAdd = async (val)=>{
  let res = await projectAdd(val);
  if(res.code === 200){
    // 弹出窗口 新增成功
    MessagePlugin.success("新增成功!")
    // 关闭窗口
    handleClose();
    // 重新查询
    handleSearch();
    // 清空表单内容, 调用的子组件的方法
    formRef.value.handleClear()
  }else{
    MessagePlugin.error(res.msg)
  }
} 

//**************  修改 ******************
let formBaseData = ref(null);// 给修改窗口的表单绑定数据
let handleEdit = (row) => {
  // 修改标题为 编辑
  title.value='编辑';
  // 弹出编辑的窗口
  visible.value=true;
  getDetails(row.id)
}
// 查询数据
let getDetails = async (id) => {
  // 发请求给后台获取数据
  let res = await getProjectDetails(id);
  if(res.code === 200){
    // 数据绑定到窗口回显
    formBaseData.value = res.data;
  }else{
    MessagePlugin.error(res.msg)
  }
}
// 弹窗的标题
let title = ref('');
// 编辑后的提交
let handleEditForm = async (val) => {
  // 提交后台
  let res = await projectUpdate(val);
  if(res.code === 200){
    // 弹出窗口 新增成功
    MessagePlugin.success("编辑成功!")
    // 关闭窗口
    handleClose();
    // 重新查询
    handleSearch();
    // 清空表单内容, 调用的子组件的方法
    formRef.value.handleClear()
  }else{
    MessagePlugin.error(res.msg)
  }
}
//***************************************/

</script>